<template>
  <div class="contact-bg" id="contact">
    <div class="contact-container">
      <el-row>
        <h1><b>欢迎</b>更多小伙伴与我交流</h1>
      </el-row>
      <el-row>
        <el-col :span="12" class="wow animate__animated animate__zoomIn">
          <img src="../assets/images/contact.png" alt="" />
        </el-col>
        <el-col :span="12" class="wow animate__animated animate__zoomIn">
          <p>
            大家好，我是一名即将毕业的大学生，在校所学的是软件工程专业，目前从事前端开发的工作，具有一定的前端基础，欢迎各位一起学习交流
          </p>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="手机" prop="tel">
              <el-input
                v-model="ruleForm.tel"
                οninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value = value.slice(0, 11)"
              ></el-input>
            </el-form-item>

            <el-form-item label="交流分享" prop="desc">
              <el-input
                type="textarea"
                v-model="ruleForm.desc"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { WOW } from "wowjs";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        telephone: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入您的姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2到10个字符", trigger: "blur" },
        ],
        tel: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { min: 11, message: "手机号格式不正确", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请填写交流信息", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
        } else {
          this.$message.error("提交失败，请确认信息是否正确或完整");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    new WOW().init();
  },
};
</script>

<style lang="less" scoped>
.contact-bg {
  background-color: #c1c1c1;
}
.contact-container {
  width: 1200px;
  margin: 0 auto;
  h1 {
    font-size: 24px;
    font-weight: normal;
    color: #444444;
    b {
      display: inline-block;
      font-weight: normal;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #ffad2b;
    }
  }
  p {
    font-size: 14px;
    line-height: 36px;
    color: #777777;
  }
}
</style>